<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar title="海钓预约"></c-nav-bar>
		<view class="hander">
			<view class="hander-one" @tap="toLbDetails(topBgImg.route)" v-if="topBgImg.path" :style="{'background':'url('+topBgImg.path+')','background-size':'cover'}">
				<!-- 	<image src="https://i.ringzle.com/file/20240409/6733714fff224b738ceaa1349450843a.png" mode="aspectFill">
				</image> -->
			</view>
			<view class="list">
				<view v-for="(item,index) in list" :key="index" @tap="toDetails(item)">
					<image :src="item.coverPic"></image>
					<view class="info">
						<view class="title">{{item.name}}</view>
						<view class="tags">
							<view v-for="(tag,idx) in item.labelList" :key="idx">
								<view>{{tag}}</view>
							</view>
						</view>
						<view class="price">
							<!-- <view>已售<span>{{item.sailNum}}</span></view> -->
							<view>￥<span>{{item.spend}}</span>/{{item.spendType==0?'人':'艘'}}</view>
						</view>
					</view>
				</view>

			</view>

			<view class="content-one" :style="{'height':h1}">
				<view class="content-one-image">
					<image src="https://i.ringzle.com/file/20240409/9b106c1d42ea40bb93ca36bab50d5be3.png"
						mode="aspectFill"></image>

				</view>
				<u-parse :content="info.equipAdvise" style="width:100%"></u-parse>

				<text @click="h1='auto'" v-if="h1!='auto'" class="zk">展开</text>
				<text @click="h1='800rpx'" v-else class="zk">收起</text>
			</view>

			<view class="content-two" :style="{'height':h2}">
				<view class="content-two-image">
					<image src="https://i.ringzle.com/file/20240409/8205f891ac0f4f49859ffc94f7455763.png"
						mode="aspectFill"></image>
				</view>
				<u-parse :content="info.fishingSkill" style="width:100%"></u-parse>
				<text @click="h2='auto'" v-if="h2!='auto'" class="zk">展开</text>
				<text @click="h2='800rpx'" v-else class="zk">收起</text>
			</view>

		</view>


	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				h1: '800rpx',
				h2: '800rpx',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				info: {
					equipAdvise: '',
					fishingSkill: ''
				},
				list: [],
				topBgImg: 'https://i.ringzle.com/file/20240409/6733714fff224b738ceaa1349450843a.png'

			}
		},
		onLoad(option) {
			this.getdata();
			// 模拟后端请求
			this.getList()
			this.getLbList()

		},
		methods: {
			toLbDetails(url) {
				if (!url) return
				uni.navigateTo({ url })
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/22').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>{
							return {path:b.path,route:b.linkUri}
						})
						if (list.length > 0) this.topBgImg = list[0];
					}
				})
			},



			load() {
				this.$refs.uReadMore.init();
			},
			getdata() {
				this.$api.get('/api/fishingappointment/views', {})
					.then(res => {
						if (res.data.code == 0) {
							this.list = res.data.data;
						}


					})
			},
			getList() {
				this.$api.get('/api/fishingappointment/view', {})
					.then(res => {
						if (res.data.code == 0) {
							this.info = res.data.data;
						}

					})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pagesIndex/seaFishing/details?id=' + item.id
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	p {
		margin: 5px 0 !important;
	}
</style>
<style scoped lang="less">
	.zk {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
	}

	.page {
		width: 100%;
		// height: 100%;
		box-sizing: border-box;
		// background: #F5F8FA;


		.hander {
			box-sizing: border-box;

			// height: 5698rpx;
			// height: 100%;
			width: 100%;
			padding-bottom: 50rpx;
			// background: linear-gradient(to bottom, #72dff1, #);
			background-color: #D4F0F4;



			.hander-one {
				box-sizing: border-box;
				border-top: 1rpx solid #FFFFFF;
				// background-image: url('https://i.ringzle.com/file/20240409/6733714fff224b738ceaa1349450843a.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 769rpx;
				// position: relative;


				.two {
					margin: auto 48rpx;
					width: 653rpx;
					height: 335rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

		}

		.list {
			position: relative;
			top: -60rpx;
			// position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 24rpx 24rpx;



			&>view {
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				display: flex;
				margin-top: 20rpx;
				border-radius: 20rpx;

				image {
					width: 190rpx;
					height: 190rpx;
				}

				.info {
					width: calc(100% - 210rpx);
					padding-left: 20rpx;

					.title {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						margin-top: 8rpx;
					}

					.tags {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						&>view {
							width: 110rpx;
							height: 36rpx;
							border-radius: 4rpx;
							border: 1rpx solid #B6C1CF;
							line-height: 36rpx;
							text-align: center;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #8188A8;
							margin-left: 12rpx;

							&:first-child {
								margin-left: 0;
							}
						}
					}

					.price {
						// display: flex;
						align-items: center;
						// justify-content: flex-end;
						margin-top: 45rpx;

						&>view {

							// &:first-child{
							// 	font-size: 24rpx;
							// 	font-family: PingFangSC-Regular, PingFang SC;
							// 	font-weight: 400;
							// 	color: #AAAAAA;
							// 	span{
							// 		font-family: PingFang-SC-Bold, PingFang-SC;
							// 		font-weight: bold;
							// 		color: #808080;
							// 		margin-left: 4rpx;
							// 	}
							// }
							&:last-child {
								font-size: 20rpx;
								font-family: PingFang-SC-Regular, PingFang-SC;
								font-weight: 400;
								color: #FD3939;

								span {
									font-size: 32rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}


		.content-one {
			box-sizing: border-box;
			padding: 88rpx 30rpx;
			margin: -20rpx 20rpx;
			border-radius: 20rpx;
			width: 710rpx;
			height: 800px;
			background-color: #FFFFFF;
			position: relative;
			overflow: hidden;

			.content-one-image {
				position: absolute;
				width: 270rpx;
				height: 64rpx;
				// top: -10rpx;
				top: 0;
				left: 32%;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.content-two {
			box-sizing: border-box;
			padding: 88rpx 30rpx;
			margin: 40rpx 20rpx;
			border-radius: 20rpx;
			width: 710rpx;
			height: 699rpx;
			background-color: #FFFFFF;
			position: relative;
			overflow: hidden;

			.content-two-image {
				position: absolute;
				width: 202rpx;
				height: 64rpx;
				// top: -10rpx;
				top: -2px;
				left: 38%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>